<template>
<view class="container">
        <view class="search">
            <navigator url="/pages/search/search" class="input">
                <image class="icon" src="/images/icon/search.png"></image>
                <text class="txt">搜索, 共{{ goodsCount }}款好味</text>
            </navigator>
        </view>
        <view class="catalog">
            <scroll-view class="nav" :scroll-y="true">
                <view :class="'item ' + (nowId == 0 ? 'active' : '')" @tap="switchCate" data-id="0">全部</view>
                <view :class="'item ' + (nowId == item.id ? 'active' : '')" :data-id="item.id" @tap="switchCate" v-for="(item, index) in navList" :key="index">
                    {{ item.name }}
                </view>
            </scroll-view>
            <scroll-view class="cate" :scroll-y="true" @scrolltolower="onBottom">
                <block v-if="loading == 0">
                    <view class="banner-container" v-if="nowId != 0 && index_banner_img == 1">
                        <image mode="aspectFill" :style="'width:100%;height:' + currentCategory.p_height + 'rpx'" :src="currentCategory.img_url"></image>
                        <view class="bg" :style="'height:' + currentCategory.p_height + 'rpx;line-height:' + currentCategory.p_height + 'rpx;'"></view>
                        <view class="text" :style="'height:' + currentCategory.p_height + 'rpx;line-height:' + currentCategory.p_height + 'rpx;'">{{ currentCategory.name }}</view>
                    </view>
                    <view class="list-wrap clearfix">
                        <view :class="'goods-box ' + ((index + 1) % 2 == 0 ? 'no-margin' : '')" v-for="(item, index) in list" :key="index">
                            <navigator hover-class="none" class="navi-url" :url="'/pages/goods/goods?id=' + item.id">
                                <view class="box">
                                    <image :src="item.list_pic_url" class="image">
                                        <view v-if="item.is_new == 1" class="new-tag">新品</view>
                                    </image>
                                    <block v-if="item.goods_number <= 0">
                                        <!-- <view class='no-goods-mask'></view> -->
                                        <view class="sold-img">
                                            <image class="soldout" src="/static/images/icon/sold-out.png"></image>
                                        </view>
                                    </block>
                                </view>
                                <view :class="'goods-info ' + (item.goods_number <= 0 ? 'fast-out-status' : '')">
                                    <view class="goods-title">{{ item.name }}</view>
                                    <view class="goods-intro">{{ item.goods_brief }}</view>
                                    <view class="price-container">
                                        <view class="l">
                                            <view class="h">￥{{ item.min_retail_price }}</view>
                                        </view>
                                    </view>
                                </view>
                            </navigator>
                        </view>
                    </view>
                    <view class="show-more" @tap="onBottom" v-if="showNoMore == 1">加载更多</view>
                    <view class="no-more" v-else>没有更多商品了</view>
                </block>
                <block v-else>
                    <view class="loading-wrap">
                        <image class="img" src="/images/icon/loading.gif"></image>
                        <view class="text">正在加载...</view>
                    </view>
                </block>
            </scroll-view>
        </view>
    </view>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app";

// 模拟分类数据
const mockCategories = [
    { id: 1, name: '热门推荐', img_url: '/static/images/default.png', p_height: 200 },
    { id: 2, name: '手机数码', img_url: '/static/images/default.png', p_height: 200 },
    { id: 3, name: '电脑办公', img_url: '/static/images/default.png', p_height: 200 },
    { id: 4, name: '家用电器', img_url: '/static/images/default.png', p_height: 200 },
    { id: 5, name: '美妆护肤', img_url: '/static/images/default.png', p_height: 200 },
    { id: 6, name: '个护清洁', img_url: '/static/images/default.png', p_height: 200 },
    { id: 7, name: '服饰内衣', img_url: '/static/images/default.png', p_height: 200 },
    { id: 8, name: '鞋靴箱包', img_url: '/static/images/default.png', p_height: 200 }
]

// 模拟商品数据
const mockGoods = [
    {
        id: 1,
        name: '示例商品1',
        list_pic_url: '/static/images/default.png',
        goods_brief: '商品简介1',
        min_retail_price: '99.00',
        goods_number: 10,
        is_new: 1
    },
    {
        id: 2,
        name: '示例商品2',
        list_pic_url: '/static/images/default.png',
        goods_brief: '商品简介2',
        min_retail_price: '199.00',
        goods_number: 5,
        is_new: 0
    },
    {
        id: 3,
        name: '示例商品3',
        list_pic_url: '/static/images/default.png',
        goods_brief: '商品简介3',
        min_retail_price: '299.00',
        goods_number: 0,
        is_new: 1
    },
    {
        id: 4,
        name: '示例商品4',
        list_pic_url: '/static/images/default.png',
        goods_brief: '商品简介4',
        min_retail_price: '399.00',
        goods_number: 15,
        is_new: 0
    }
]

// 状态变量
const navList = ref([])  // 左侧导航列表
const nowId = ref(0)     // 当前选中的分类ID
const list = ref([])     // 商品列表
const loading = ref(0)   // 加载状态
const page = ref(1)      // 当前页码
const limit = ref(10)    // 每页数量
const showNoMore = ref(1) // 是否显示加载更多
const goodsCount = ref(0) // 商品总数
const index_banner_img = ref(1)
const currentCategory = ref(null)

// 获取分类列表
const getCategoryList = () => {
    navList.value = mockCategories
    nowId.value = 0  // 默认选中"全部"
    getGoodsList()
}

// 获取商品列表
const getGoodsList = () => {
    loading.value = 1
    setTimeout(() => {  // 模拟网络延迟
        if (page.value === 1) {
            list.value = mockGoods
        } else {
            list.value = [...list.value, ...mockGoods]
        }
        goodsCount.value = mockGoods.length * 3  // 模拟总商品数
        showNoMore.value = page.value < 3 ? 1 : 0  // 模拟3页数据
        loading.value = 0
        
        // 更新当前分类信息
        if (nowId.value !== 0) {
            currentCategory.value = mockCategories.find(item => item.id === nowId.value)
        }
    }, 500)
}

// 切换分类
const switchCate = (event) => {
    const id = event.currentTarget.dataset.id
    if (id !== nowId.value) {
        nowId.value = parseInt(id)
        page.value = 1
        getGoodsList()
    }
}

// 加载更多
const onBottom = () => {
    if (showNoMore.value === 1) {
        page.value++
        getGoodsList()
    }
}

onLoad(() => {
    getCategoryList()
})
</script>

<style>
page {
  height: 100%;
}

.container {
  background: #fafafa;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search {
  height: 100rpx;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: fixed;
  z-index: 99;
  padding: 0 24rpx;
}

.search .input {
  width: 100%;
  height: 80rpx;
  background: #f8f8f8;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search .icon {
  width: 30rpx;
  height: 30rpx;
}

.search .txt {
  height: 42rpx;
  line-height: 42rpx;
  color: #666;
  padding-left: 10rpx;
  font-size: 28rpx;
}

.catalog {
  flex: 1;
  width: 100%;
  background: #fff;
  display: flex;
  border-top: 1px solid #fafafa;
  /* position: fixed; */
  margin-top: 90rpx;
}

.catalog .nav {
  width: 162rpx;
  height: 100%;
}

.catalog .nav .item {
  text-align: center;
  line-height: 90rpx;
  width: 162rpx;
  height: 90rpx;
  color: #333;
  font-size: 28rpx;
}

.catalog .nav .item.active {
  color: #ff3456;
  font-size: 32rpx;
  font-weight: 500;
}

.catalog .cate {
  flex: 1;
  height: 100%;
  padding: 0 24rpx 0 30rpx;
}

.catalog .cate .show-more {
  height: 100rpx;
  line-height: 100rpx;
  padding-bottom: 100rpx;
  text-align: center;
  font-size: 26rpx;
  color: #52a9e2;
}

.catalog .cate .no-more {
  height: 100rpx;
  line-height: 100rpx;
  padding-bottom: 100rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666;
}

.catalog .cate .loading-wrap {
  width: 100%;
  height: 500rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.catalog .cate .loading-wrap .img {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}
.catalog .cate .loading-wrap .text {
  font-size: 26rpx;
  color: #999;
}

.catalog .cate .banner-container {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.catalog .cate .banner-container .banner-image-wrap {
  width: 100%;
}

.catalog .cate .banner-container image {
  width: 100%;
  border-radius: 8rpx;
}

.catalog .cate .banner-container .text {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 30rpx;
  font-weight: 500;
  z-index: 9;
  color: #fff;
}

.catalog .cate .banner-container .bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  border-radius: 10rpx;
  opacity: 0.2;
}

.catalog .hd {
  height: 108rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.catalog .hd .txt {
  font-size: 24rpx;
  text-align: center;
  color: #333;
  padding: 0 10rpx;
  width: auto;
}

.catalog .hd .line {
  width: 40rpx;
  height: 1px;
  background: #d9d9d9;
}

.catalog .bd {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.catalog .bd .item {
  display: block;
  float: left;
  height: 216rpx;
  width: 144rpx;
  margin-right: 34rpx;
}

.catalog .bd .item.last {
  margin-right: 0;
}

.catalog .bd .item .icon {
  height: 144rpx;
  width: 144rpx;
}

.catalog .bd .item .txt {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #333;
  height: 72rpx;
  width: 144rpx;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}

.list-wrap {
  display: block;
  width: 100%;
  padding: 24rpx 0 0 0;
  height: auto;
  box-sizing: border-box;
}

.list-wrap .goods-box {
  width: 256rpx;
  /* height: 330rpx; */
  float: left;
  margin: 0 20rpx 20rpx 0;
}

.list-wrap .no-margin {
  margin-right: 0;
}

.goods-box .navi-url {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.goods-box .navi-url .image {
  width: 256rpx;
  height: 256rpx;
  border-radius: 8rpx;
  background: #f9f9f9;
}

.goods-box .navi-url .box {
  height: 256rpx;
  width: 256rpx;
  position: relative;
  margin-bottom: 10rpx;
}

.goods-box .navi-url .box .new-tag {
  height: 36rpx;
  width: 60rpx;
  background: #ca2a1d;
  position: absolute;
  top: 20rpx;
  left: 0;
  line-height: 36rpx;
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  border-radius: 0 40rpx 40rpx 0;
}

.goods-box .navi-url .goods-info .goods-title {
  font-size: 24rpx;
  color: #222;
  margin-bottom: 6rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.goods-box .navi-url .goods-info .goods-intro {
  font-size: 16rpx;
  color: #888;
  margin-bottom: 6rpx;
  /* height: 64rpx; */
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.goods-box .navi-url .goods-info .price-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-box .navi-url .goods-info .price-container .l {
  display: flex;
  flex-direction: column;
}

.goods-box .navi-url .goods-info .price-container .r {
  width: 46rpx;
  height: 46rpx;
}

.goods-box .navi-url .goods-info .price-container .r .cart-img {
  width: 46rpx;
  height: 46rpx;
}

.goods-box .navi-url .goods-info .price-container .l .h {
  font-size: 28rpx;
  font-weight: 500;
  color: #ff3456;
}

.goods-box .navi-url .goods-info .price-container .l .b {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.goods-box .navi-url .goods-info .price-container .l .no-level {
  font-size: 26rpx;
  color: #e00000;
}

.goods-box .navi-url .goods-info .price-container .l .b .price-w {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.goods-box .navi-url .goods-info .price-container .l .b .price-t {
  font-size: 26rpx;
  color: #e00000;
  margin-right: 6rpx;
}

.goods-box .navi-url .goods-info .price-container .l .b .price-tag {
  border: 1rpx solid #e00000;
  color: #e00000;
  background: #ffeaea;
  border-radius: 100rpx;
  padding: 0 6rpx;
  font-size: 14rpx;
  text-align: center;
  line-height: 22rpx;
  height: 22rpx;
}

.goods-box .navi-url .goods-info .price-container .retail-price {
  font-size: 18rpx;
  color: #000;
  margin-bottom: 4rpx;
  /* font-weight: bold; */
}

.no-goods-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 256rpx;
  height: 256rpx;
  background: #000;
  opacity: 0.3;
}

.sold-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 256rpx;
  height: 256rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.soldout {
  height: 140rpx;
  width: 140rpx;
}

</style>
